<script>
export default {
  props: {
    room: {
      type: Object,
      required: true,
      default() {
        return null
      }
    }
  },
  data() {
    return {

    }
  },
  methods: {
    toEmployeeProfile(employee) {
      this.$router.push({
        path: `/personnel-files/show/${employee.id}`,
        query: { tag_title: employee?.username + '-查看', show: true }
      })
    }
  },
  created() {
    // console.log(this.room,'room');
  },
}
</script>
<template>
  <div class="room-overview">
    <span>{{ room.name }}：</span>
    <div style="padding: 4px;border-radius: 6px;background-color: #f0f0f0;">
      <span v-for="(employee, employeeIndex) in room.employees" :key="employeeIndex" class="wrapper">
        <el-tag size="small" type="info" plain @click="toEmployeeProfile(employee.user)">
          {{ employee?.user?.username }}
        </el-tag>
      </span>

      <span v-for="i in room.remain" :key="i.id" class="wrapper">
        <el-tag size="small" type="success" plain>
          空位
        </el-tag>
      </span>
    </div>
  </div>
</template>
<style lang="scss">
    .room-overview {
        min-width: 200px;
        max-width: 600px;
        margin-bottom: 14px;
        .wrapper{
            padding: 2px;
            display: inline-block;
            .el-tag {
                cursor: pointer;
            }
        }
    }
</style>
